<template>
  <div class="box">
    <div id="buy" :class="{ is_fixed: isFix }">
      <div class="buy-left">{{ msg.name }}</div>
      <div class="buy-right">
        <a href="">概述</a>
        <a href="">参数</a>
        <a href="">用户评价</a>
        <button @click="gotoDetail(msg.id)">立即购买</button>
      </div>
    </div>
  </div>
</template>

<script>
// 先把这个组件做成fiexd定位的组件
// 此时的buy组件能否脱离文档流布局
// 依赖的是is_fiexd 所决定的
// 有就定位了 无就正常、
// 这个类名是否存在依赖的是谁呢？
// 滚动条的位置

// 问题转移了 滚动条滚到某个位置的时候 isfix 变成true =>buy 变成定位
export default {
  data() {
    return {
      isFix: false,
      offsetTop: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
      this.offsetTop = document.querySelector("#buy").offsetTop;
    });
    // window.addEventListener('scroll',this.throttle(this.handler,100))
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
    // window.removeEventListener('scroll',this.throttle)
  },
  props: ["msg"],
  methods: {
    throttle(fn, wait) {
      // 节流函数
      // wait 节流函数
      // fn 回调函数
      let flag = true;
      // flag 一定是在500ms后才变成true
      // 如果在500ms内再次触发这个 throttle函数
      // 此时的flag还是false  就会终止函数
      return () => {
        if (!flag) {
          return;
        }
        flag = false;
        setTimeout(() => {
          fn();
          flag = true;
        }, wait);
      };
    },

    initHeight() {
      // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFix = scrollTop > this.offsetTop ? true : false;
    },
    gotoDetail(id) {
      console.log(id);
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
#buy {
  width: 1226px;
  height: 60px;
  background-color: #000;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border: 1px solid rgba(0, 0, 0, 0.1);
  border-color: hsla(0, 0%, 100%, 0.1);
  .buy-left {
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin-left: 20px;
  }
  .buy-right {
    width: 251px;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    a {
      color: #b3b3b3;
      cursor: pointer;
      font-size: 16px;
      font-weight: 400;
      &:hover {
        color: #fff;
      }
    }
    button {
      font-size: 16px;
      background: #f50514;
      border-radius: 2px;
      color: #fff;
      height: 36px;
      border: none;
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
.is_fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 338px;
  z-index: 999;
}
</style>